<template>
  <div>
    <p></p>
    <el-steps :active="activeStep" align-center>
      <el-step title="填写演出相关信息"></el-step>
      <el-step title="添加演出艺人相关信息"></el-step>
      <el-step title="添加门票相关信息"></el-step>
      <el-step title="提交审核"></el-step>
    </el-steps>

    <!--第一步 演出相关信息 -->
    <p></p>
    <el-form v-if="form.show" :model="form" :visible.sync="dialogFormVisible" class="createform">
      <el-form-item label="演出名称" :label-width="formLabelWidth">
        <el-input v-model="form.showName"></el-input>
      </el-form-item>
      <el-form-item label="演出类型" :label-width="formLabelWidth">
        <el-select v-model="form.showType" clearable placeholder="请选择">
          <el-option
            v-for="item in typeoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="演出封面" :label-width="formLabelWidth">
        <el-upload
          :action="uploadUrl()"
          :on-remove="handleRemove1"
          :on-success="handleSuccess1"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="form.showCover"
          list-type="picture-card">
          <el-button size="small" type="primary">点击上传封面图片</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="演出相册" :label-width="formLabelWidth">
        <el-upload
          :action="uploadUrl()"
          :on-remove="handleRemove5"
          :on-success="handleSuccess5"
          :on-preview="handlePictureCardPreview"
          :limit="10"
          :on-exceed="handleExceed2"
          :file-list="form.showPhotos"
          list-type="picture-card">
          <i class="el-icon-plus"></i>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="销售状态" :label-width="formLabelWidth">
        <el-input v-model="form.showStatus" disabled></el-input>
      </el-form-item>
      <el-form-item label="演出时间" :label-width="formLabelWidth">
        <el-date-picker
          v-model="form.showTime"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
          value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="演出城市" :label-width="formLabelWidth">
        <el-input v-model="form.showCity"></el-input>
      </el-form-item>
      <el-form-item label="演出场地" :label-width="formLabelWidth">
        <el-input v-model="form.showField"></el-input>
      </el-form-item>
      <el-form-item label="演出场地图片" :label-width="formLabelWidth">
        <el-upload
          :action="uploadUrl()"
          :on-remove="handleRemove2"
          :on-success="handleSuccess2"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="form.showFieldPhoto"
          list-type="picture-card">
          <el-button size="small" type="primary">点击上传演出场地图片</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="详细地址" :label-width="formLabelWidth">
        <el-input v-model="form.showAddress"></el-input>
      </el-form-item>
      <el-form-item label="主办方" :label-width="formLabelWidth">
        <el-input v-model="form.showOrganiser"></el-input>
      </el-form-item>
      <el-form-item label="主办方照片" :label-width="formLabelWidth">
        <el-upload
          :action="uploadUrl()"
          :on-remove="handleRemove4"
          :on-success="handleSuccess4"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="form.showOrganiserPhoto"
          list-type="picture-card">
          <el-button size="small" type="primary">点击上传主办方照片</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>
      </el-form-item>
    </el-form>

    <!--第二步 艺人信息 -->
    <el-form v-if="actorForm.show" :model="actorForm" :visible.sync="dialogFormVisible" class="createform">
      <el-form-item label="艺人名字" :label-width="formLabelWidth">
        <el-input v-model="actorForm.actorName"></el-input>
      </el-form-item>
      <el-form-item label="艺人图片" :label-width="formLabelWidth">
        <el-upload
          ref="upload"
          :action="uploadUrl()"
          :on-remove="handleRemove3"
          :on-success="handleSuccess3"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="form.actorImgUrl">
          <el-button size="small" type="primary">点击上传艺人图片</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button type="primary" @click="addActor()">添加</el-button>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-table
          :data="actorForm.actorList"
          ref="multipleTable"
          :highlight-current-row="true"
          border>
          <el-table-column
            prop="actorName"
            label="艺人名称">
          </el-table-column>
          <el-table-column
            prop="actorImgRealUrl"
            label="艺人图片">
            <template slot-scope="scope">
              <img :src="scope.row.actorImgRealUrl" alt="艺人图片" width="100" height="100">
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleDelete(scope.$index, actorForm.actorList)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <!--第三步 门票信息 -->
    <el-form v-if="ticketForm.show" :model="ticketForm" :visible.sync="dialogFormVisible" class="createform">
      <el-form-item label="门票类型" :label-width="formLabelWidth">
        <el-input v-model="ticketForm.ticketType"></el-input>
      </el-form-item>
      <el-form-item label="门票价格(元)" :label-width="formLabelWidth">
        <el-input v-model="ticketForm.ticketPrice"></el-input>
      </el-form-item>
      <el-form-item label="门票总数" :label-width="formLabelWidth">
        <el-input v-model="ticketForm.ticketCount"></el-input>
      </el-form-item>
      <el-form-item label="限购数量" :label-width="formLabelWidth">
        <el-input v-model="ticketForm.limitPurchase"></el-input>
      </el-form-item>
      <el-form-item label="演出时间" :label-width="formLabelWidth">
        <el-date-picker
          disabled="true"
          v-model="form.showTime"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
          value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="售票开始时间" :label-width="formLabelWidth">
        <el-date-picker
          v-model="ticketForm.beginTicketSaleTime"
          type="datetime"
          placeholder="选择开始日期时间"
          default-time="12:00:00"
          value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="售票截止时间" :label-width="formLabelWidth">
        <el-date-picker
          v-model="ticketForm.endTicketSaleTime"
          type="datetime"
          placeholder="选择截止日期时间"
          default-time="12:00:00"
          value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button type="primary" @click="addTicket()">添加</el-button>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-table
          :data="ticketForm.ticketList"
          ref="multipleTable"
          :highlight-current-row="true"
          border>
          <el-table-column
            prop="ticketType"
            label="门票类型">
          </el-table-column>
          <el-table-column
            prop="ticketPrice"
            label="门票价格(元)">
          </el-table-column>
          <el-table-column
            prop="ticketCount"
            label="门票总数">
          </el-table-column>
          <el-table-column
            prop="limitPurchase"
            label="限购数量">
          </el-table-column>
          <el-table-column
            prop="beginTicketSaleTime"
            label="售票开始时间"
            :formatter="dateFormat">
          </el-table-column>
          <el-table-column
            prop="endTicketSaleTime"
            label="售票截止时间"
            :formatter="dateFormat">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleDelete(scope.$index, ticketForm.ticketList)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>

    <!--第四步 提交审核 -->
    <el-form v-if="checkForm.show" :model="checkForm" :visible.sync="dialogFormVisible" class="createform">
    </el-form>

    <el-form class="createform">
      <el-form-item :label-width="formLabelWidth">
        <el-button v-if="!form.show" type="primary" @click="btn_back">上一步</el-button>
        <el-button v-if="!ticketForm.show" type="primary" @click="btn_next">下一步</el-button>
        <el-button v-if="ticketForm.show" type="primary" @click="btn_submit">提 交</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>已提交审核</span>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="btn_finish_step()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import moment from 'moment'

  export default {
    name: 'createshow',
    data() {
      return {
        typeoptions: [{
          value: '摇滚',
          label: '摇滚'
        }, {
          value: '民谣',
          label: '民谣'
        }, {
          value: '流行',
          label: '流行'
        }, {
          value: '嘻哈',
          label: '嘻哈'
        }, {
          value: '电子',
          label: '电子'
        }, {
          value: '其它',
          label: '其它'
        }],
        activeStep: 1,
        centerDialogVisible: false,
        deleteDialogVisible: false, // 删除确认对话框
        dialogFormVisible: true, // 弹出添加代理商dialog form
        dialogFormModifyVisible: false, // 修改框
        formLabelWidth: '200px', // 弹出框form宽
        form: {
          id: '',
          showName: '',
          showType: '',
          showCover: [],
          showPhotos: [],
          showStatus: '待审核',
          showTime: '',
          showCity: '',
          showField: '',
          showFieldPhoto: [],
          showOrganiserPhoto: [],
          showAddress: '',
          showActors: [],
          showOrganiser: '',
          show: true
        },
        actorForm: {
          actorName: '',
          actorImgUrl: '',
          actorList: [],
          show: false
        },
        ticketForm: {
          ticketPrice: '',
          ticketType: '',
          ticketCount: '',
          limitPurchase: '',
          beginTicketSaleTime: '',
          endTicketSaleTime: '',
          ticketList: [],
          show: false
        },
        checkForm: {
          show: false
        }
      }
    },
    methods: {
      dateFormat(row, column) {
        var date = row[column.property]
        if (date === undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      addActor() {
        if (this.actorForm.actorName === '' || this.actorForm.actorName === undefined) {
          this.$message.error('请输入艺人名字，艺人名字不能为空')
          return
        }
        if (this.actorForm.actorImgUrl === '' || this.actorForm.actorImgUrl === undefined) {
          this.$message.error('请输入艺人图片，艺人图片不能为空')
          return
        }
        if (this.actorForm.actorList.length > 4) {
          this.$message.error('最多设置5个艺人')
          return
        }
        var imgUrl = process.env.BASE_API + '/show/getimg?fileUrl='
        this.actorForm.actorList.push({
          actorName: this.actorForm.actorName,
          actorImgUrl: this.actorForm.actorImgUrl,
          actorImgRealUrl: imgUrl + this.actorForm.actorImgUrl
        })
        this.actorForm.actorName = ''
        this.actorForm.actorImgUrl = ''
        this.actorForm.actorImgRealUrl = ''
        this.$refs.upload.clearFiles()
      },
      addTicket() {
        if (this.ticketForm.ticketType === '' || this.ticketForm.ticketType === undefined) {
          this.$message.error('请输入门票类型，门票类型不能为空')
          return
        }
        if (this.ticketForm.ticketPrice === '' || this.ticketForm.ticketPrice === undefined) {
          this.$message.error('请输入门票价格，门票价格不能为空')
          return
        }
        if (this.ticketForm.ticketCount === '' || this.ticketForm.ticketCount === undefined) {
          this.$message.error('请输入门票数量，门票数量不能为空')
          return
        }
        if (this.ticketForm.limitPurchase === '' || this.ticketForm.limitPurchase === undefined) {
          this.$message.error('请输入限购数量，限购数量不能为空')
          return
        }
        if (this.ticketForm.beginTicketSaleTime === '' || this.ticketForm.beginTicketSaleTime === undefined) {
          this.$message.error('请输入售票开始时间，售票开始时间不能为空')
          return
        }
        if (this.ticketForm.endTicketSaleTime === '' || this.ticketForm.endTicketSaleTime === undefined) {
          this.$message.error('请输入售票截止时间，售票截止时间不能为空')
          return
        }
        if (this.ticketForm.beginTicketSaleTime >= this.ticketForm.endTicketSaleTime) {
          this.$message.error('售票开始时间必须小于售票截止时间，请重新选择')
          return
        }
        if (this.ticketForm.endTicketSaleTime >= this.form.showTime) {
          this.$message.error('售票截止时间必须小于演出时间，请重新选择')
          return
        }
        var ticketCount = Number(this.ticketForm.ticketCount)
        var limitPurchase = Number(this.ticketForm.limitPurchase)
        if (ticketCount < 1) {
          this.$message.error('门票数量格式有误')
          return
        }
        if (limitPurchase < 1) {
          this.$message.error('限购数量格式有误')
          return
        }
        if (limitPurchase > ticketCount) {
          this.$message.error('限购数量不能大于门票数量')
          return
        }
        this.ticketForm.ticketList.push({
          ticketPrice: this.ticketForm.ticketPrice,
          ticketType: this.ticketForm.ticketType,
          ticketCount: this.ticketForm.ticketCount,
          limitPurchase: this.ticketForm.limitPurchase,
          beginTicketSaleTime: this.ticketForm.beginTicketSaleTime,
          endTicketSaleTime: this.ticketForm.endTicketSaleTime
        })
        this.ticketForm.ticketList.sort(function(a, b) {
          return a.ticketPrice - b.ticketPrice
        })
        this.ticketForm.ticketPrice = ''
        this.ticketForm.ticketType = ''
        this.ticketForm.ticketCount = ''
        this.ticketForm.limitPurchase = ''
        this.ticketForm.beginTicketSaleTime = ''
        this.ticketForm.endTicketSaleTime = ''
      },
      clearForm() {
        this.form.showName = ''
        this.form.showType = ''
        this.form.showCover = []
        this.form.showPhotos = []
        this.form.showStatus = '待审核'
        this.form.showTime = ''
        this.form.showCity = ''
        this.form.showField = ''
        this.form.showFieldPhoto = []
        this.form.showOrganiserPhoto = []
        this.form.showAddress = ''
        this.form.showActors = []
        this.form.showOrganiser = ''
        this.actorForm.actorList = []
        this.ticketForm.ticketList = []
      },
      handleDelete(index, rows) {
        rows.splice(index, 1)
      },
      uploadUrl() {
        return process.env.Upload_URL
      },
      handleSuccess1(res) {
        if (res.code === 10000) {
          this.form.showCover = res.imageUrl
        }
      },
      handleSuccess2(res) {
        if (res.code === 10000) {
          this.form.showFieldPhoto = res.imageUrl
        }
      },
      handleSuccess3(res) {
        if (res.code === 10000) {
          this.actorForm.actorImgUrl = res.imageUrl
        }
      },
      handleSuccess4(res) {
        if (res.code === 10000) {
          this.form.showOrganiserPhoto = res.imageUrl
        }
      },
      handleSuccess5(res) {
        var imgUrl = process.env.BASE_API + '/show/getimg?fileUrl='
        if (res.code === 10000) {
          this.form.showPhotos.push({
            showImgUrl: res.imageUrl,
            url: imgUrl + res.imageUrl
          })
        }
      },
      handleRemove1(file, fileList) {
        console.log(file, fileList)
        this.form.showCover = ''
      },
      handleRemove2(file, fileList) {
        console.log(file, fileList)
        this.form.showFieldPhoto = ''
      },
      handleRemove3(file, fileList) {
        console.log(file, fileList)
        this.actorForm.actorImgUrl = ''
      },
      handleRemove4(file, fileList) {
        console.log(file, fileList)
        this.form.showOrganiserPhoto = ''
      },
      handleRemove5(file, fileList) {
        console.log(file, fileList)
        this.form.showPhotos = fileList
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      handleExceed2(files, fileList) {
        this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      btn_create_cancel() {
        this.dialogFormVisible = false
      },
      btn_back() {
        if (this.actorForm.show) {
          this.form.show = true
          this.actorForm.show = false
          this.ticketForm.show = false
          this.activeStep--
        } else if (this.ticketForm.show) {
          this.form.show = false
          this.actorForm.show = true
          this.ticketForm.show = false
          this.activeStep--
        }
      },
      btn_next() {
        if (this.form.show) {
          if (this.form.showName === '' || this.form.showName === undefined) {
            this.$message.error('请输入演出名称，演出名称不能为空')
            return
          }
          if (this.form.showTime === '' || this.form.showTime === undefined) {
            this.$message.error('请输入演出时间，演出时间不能为空')
            return
          }
          this.form.show = false
          this.actorForm.show = true
          this.activeStep++
        } else if (this.actorForm.show) {
          if (this.actorForm.actorList.length < 1) {
            this.$message.error('艺人列表不能为空')
            return
          }
          this.form.show = false
          this.actorForm.show = false
          this.ticketForm.show = true
          this.activeStep++
        }
      },
      btn_submit() {
        if (this.ticketForm.ticketList.length < 1) {
          this.$message.error('门票列表不能为空')
          return
        }
        const vm = this
        var params = new URLSearchParams()
        params.append('showName', vm.form.showName)
        params.append('showType', vm.form.showType)
        params.append('showCover', vm.form.showCover)
        params.append('showStatus', vm.form.showStatus)
        params.append('showTime', vm.form.showTime)
        params.append('showCity', vm.form.showCity)
        params.append('showField', vm.form.showField)
        params.append('showFieldPhoto', vm.form.showFieldPhoto)
        params.append('showOrganiserPhoto', vm.form.showOrganiserPhoto)
        params.append('showAddress', vm.form.showAddress)
        params.append('showOrganiser', vm.form.showOrganiser)
        params.append('showActorsJson', JSON.stringify(vm.actorForm.actorList))
        params.append('showTicketsJson', JSON.stringify(vm.ticketForm.ticketList))
        params.append('showPhotosJson', JSON.stringify(vm.form.showPhotos))
        axios.post(process.env.BASE_API + '/show/create', params).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
          } else {
            vm.$message(obj.message)
          }
        }).catch(function(error) {
          alert(error)
        })
        this.form.show = false
        this.actorForm.show = false
        this.ticketForm.show = false
        this.checkForm.show = true
        this.centerDialogVisible = true
        if (this.activeStep++ > 3) this.activeStep = 0
      },
      btn_finish_step() {
        this.clearForm()
        this.centerDialogVisible = false
        this.form.show = true
        this.actorForm.show = false
        this.ticketForm.show = false
        this.checkForm.show = false
        this.activeStep = 0
      }
    }
  }
</script>

<style scoped>
.createform{
  margin-left: 15%;
  width: 60%;
}
</style>
